<template>
    <!-- 图上标绘 -->
    <div class="drawing" id="drawing">
        <div class="drawingTitle" @mousedown="mousedown" @mouseup="mouseup" @mouseout="mouseup">
            <div class="drawingTitleName">
                <!-- <img class="btnsImages" src="@/assets/image/btns/layer.png" alt="" /> -->
                <i class="fa fa-object-group"></i>
                图上标绘
            </div>
            <i class="el-icon-close closeIcon" title="关闭" @click="setDrawing"></i>
        </div>
        <!-- <div class="toolBox">
            <div class="toolBtn">
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="uploadKML" accept=".kml">
                    <i class="fa fa-folder-open-o" title="打开文件"></i>
                </el-upload>
            </div>
            <div class="toolBtn">
                <i class="fa fa-save" title="保存"></i>
            </div>
            <div class="toolBtn">
                <i class="fa fa-unlock" title="可编辑"></i>
            </div>
        </div> -->
        <div class="contentBox">
            <div class="selectdrawing">
                <div class="selectInput" @click="toggleSelectInput">
                    <span>{{ selectVaue }}</span>
                    <i class="el-icon-caret-bottom icons"></i>
                </div>
                <div class="selectInputItem" v-show="selectIsShow">
                    <div class="selectInputItemList" v-for="item in selectData" :key="item.name" v-show="item.type != 'measure' && item.type != 'analysis'" @click="selectItem(item)">
                        {{ item.name }}
                    </div>
                </div>
                <!-- <el-select v-model="value" placeholder="请选择">
                    <el-option label="111111111111" value="item.value"> </el-option>
                </el-select> -->
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <modelBaseElement :type="modelBaseElType" @toggleSelectInputNotShow="toggleSelectInputNotShow"></modelBaseElement>
                <!-- <div style="width: 100%;height: 1000px;background: red"></div> -->
            </el-scrollbar>
            <!-- <div class="treeBoxDiv"></div> -->
        </div>
    </div>
</template>
<script>
// import initTreeData from './utils/coverage.config'
import { mousedown, mouseup } from '../../utils/move.el'
import { modelBase } from '../utils/modelBase'
import modelBaseElement from './components/modelBase.vue'
// import trees from './utils/treeHandle'
export default {
    name: 'drawing',
    components: {
        modelBaseElement
    },
    data() {
        return {
            // treeData: []
            selectIsShow: false,
            selectData: [],
            selectVaue: '',
            modelBaseElType: ''
        }
    },
    computed: {
        drawingIsShow() {
            return this.$store.state.drawing.isShow
        },
        drawingType() {
            return this.$store.state.drawing.type
        }
    },
    watch: {
        drawingIsShow(newData) {
            const el = document.getElementById('drawing')
            el.style.left = 'calc(100% - 270px)'
            el.style.top = '48px'
        },
        drawingType(newData) {
            modelBase().then(res => {
                this.selectData = res
                res.forEach(v => {
                    if (v.type == this.drawingType) {
                        this.selectVaue = v.name
                        this.modelBaseElType = v.type
                    }
                })
            })
        }
    },
    mounted() {
        modelBase().then(res => {
            this.selectData = res
            res.forEach(v => {
                if (v.type == this.drawingType) {
                    this.selectVaue = v.name
                    this.modelBaseElType = v.type
                }
            })
        })
    },
    methods: {
        toggleSelectInput() {
            this.selectIsShow = !this.selectIsShow
        },
        toggleSelectInputNotShow() {
            this.selectIsShow = false
        },
        selectItem(item) {
            this.selectVaue = item.name
            this.modelBaseElType = item.type
            this.toggleSelectInput()
        },
        setDrawing() {
            this.$store.commit('setDrawing')
        },
        // 移动对话框
        mousedown(e) {
            mousedown(e, 'drawing', 'left')
        },
        mouseup() {
            mouseup()
        }
    }
}
</script>
<style lang="scss" scoped>
.drawing {
    position: fixed;
    width: 260px;
    height: calc(100vh - 70px);
    min-height: 130px;
    top: 48px;
    left: calc(100% - 270px);
    z-index: 1000;
    background: rgba(30, 36, 50, 0.6);
    border-color: rgba(32, 160, 255, 0.3);
    border: 1px solid;
    border-radius: 2px;
    .drawingTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(32, 160, 255, 0.3);
        display: flex;
        justify-content: space-between;
        padding: 0 15px 0 10px;
        align-items: center;
        cursor: move;
        .drawingTitleName {
            color: #ffffff;
            font-size: 12px;
            .btnsImages {
                width: 13px;
                height: 13px;
                vertical-align: middle;
            }
        }
        .closeIcon {
            cursor: pointer;
            color: #ffffff;
            font-size: 13px;
        }
    }
    .toolBox {
        width: 100%;
        height: 36px;
        border-bottom: 1px solid rgba(32, 160, 255, 0.3);
        color: #ffffff;
        display: flex;
        justify-content: flex-start;
        padding: 3px 10px;
        .toolBtn {
            margin-right: 10px;
            &:last-child {
                margin-right: 0;
            }
            i {
                width: 28px;
                height: 28px;
                line-height: 25px;
                text-align: center;
                background-color: rgba(63, 72, 84, 0.6);
                border: #dedede 1px solid;
                cursor: pointer;
            }
        }
    }
    .contentBox {
        padding: 2px;
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden;
        .el-scrollbar {
            width: 100%;
            height: calc(100% - 28px);
        }
        .selectdrawing {
            width: 228px;
            left: 0;
            right: 0;
            margin: 10px auto;
            font-size: 12px;
            // height: 28px;
            position: relative;
            .selectInput {
                width: 228px;
                color: #e6e6e6;
                padding: 0 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid #e6e6e6;
                height: 28px;
                border-radius: 2px;
                background: rgba(63, 72, 84, 0.6);
                cursor: pointer;
            }
            .selectInputItem {
                width: 228px;
                left: 0;
                right: 0;
                margin: 10px auto;
                background: rgba(63, 72, 84, 0.8);
                border-radius: 2px;
                border: 1px solid #e6e6e6;
                position: absolute;
                z-index: 999;
                margin-top: 2px;
                color: #e6e6e6;
                padding: 5px;
                .selectInputItemList {
                    height: 28px;
                    line-height: 28px;
                    padding: 0 5px;
                    cursor: default;
                    &:hover {
                        background: #3f4854;
                    }
                }
            }
        }
    }
}
</style>
<style>
/* .el-select .el-input.is-focus .el-input__inner,
.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
    border-color: #ffffff;
}
.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input .el-input__inner,
.el-select-dropdown__item.hover {
    background: none;
    color: #ffffff;
}
.el-select-dropdown.el-popper {
    background: rgba(63, 72, 84, 0.8);
}
.el-select-dropdown.el-popper .popper__arrow {
    display: none;
}
.el-popper {
    margin-top: 1px;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    border-color: #3f4854;
} */
</style>
